<template>
	<view>



		<view class="uni-padding-wrap xs_padTop padLeft padRig uni-common-mt">

			<!-- {{formData}} -->
			<view class="selectLang">

				<view class="locale-list">

					<picker @change="onLocaleChange" :value="applicationLocale" range-key="text" :range="locales">
						<view class="uni-input flex-box">

							<!-- <view class="locale-setting">{{$t('index.language')}}</view> -->
							<view class="slval">
								{{appLangtext}}
							</view>
							<text class="uni-bottom xs_padLeft">></text>
						</view>
					</picker>

				</view>
			</view>
			<block v-if="qrCode==1">
				<view class="tipBox">
					{{$t("form.noQr")}}
				</view>
			</block>
			<block v-if="qrCode==2">
				<form @submit="formSubmit" @reset="formReset">

					<view class="xsTitle bold t-center">
						{{$t("form.title1")}}
					</view>

					<view class="uni-form-item uni-column">
						<view class="title">{{$t("form.arrive")}}</view>

						<input class="uni-input" v-show="false" v-model="formData.arrive" name="arrive"
							:disabled="!edit" :placeholder="$t('form.enter')" />
						<picker name="arrive" :disabled="!edit" :range="arriveOpt" class="uni-input"
							:value="formData.arrive" :start="startDate" :end="endDate"
							@change="(e)=>bindDateChange(e,'arrive')">
							<view class="">{{formData.arrive||$t('form.select')}}</view>
						</picker>
					</view>
					<!-- 		<view class="uni-form-item uni-column">
						<view class="title">{{$t("form.name")}}</view>

						<input class="uni-input" v-model="formData.name" @input="(e)=>inpChange(e,'name')" name="name"
							:disabled="!edit" :placeholder="$t('form.enter')" />
					</view> -->
					<view class="uni-form-item uni-column">
						<view class="title">{{$t("form.chinaName")}}</view>

						<input class="uni-input" v-model="formData.chName" @input="(e)=>inpChange(e,'chName')"
							name="chName" :disabled="!edit" :placeholder="$t('form.enter')" />
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">{{$t("form.englishName")}}</view>

						<input class="uni-input" v-model="formData.name" @input="(e)=>inpChange(e,'name')" name="name"
							:disabled="!edit" :placeholder="$t('form.enter')" />
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">{{$t("form.phone")}}</view>

						<input class="uni-input" type="number" maxlength="15" v-model="formData.phone"
							@input="(e)=>inpChange(e,'phone')" name="phone" :disabled="!edit"
							:placeholder="$t('form.enter')" />
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">{{$t("form.passnum")}}</view>

						<input class="uni-input" type="text" v-model="formData.passnum"
							@input="(e)=>inpChange(e,'passnum')" name="passnum" :disabled="!edit"
							:placeholder="$t('form.enter')" />
					</view>

					<view class="uni-form-item uni-column">
						<view class="title">{{$t("form.country")}}</view>
						<input class="uni-input" @input="(e)=>inpChange(e,'country')" v-model="formData.country"
							name="country" :disabled="!edit" :placeholder="$t('form.enter')" />
					</view>

					<view class="uni-form-item uni-column">
						<view class="title">{{$t("form.birth")}}</view>

						<view class="uni-list-cell-db  uni-input">
							<input type="text" v-model="formData.birth" v-show="false" name="birth" />
							<picker mode="date" :disabled="!edit" :value="formData.birth" :start="startDate"
								:end="endDate" @change="(e)=>bindDateChange(e,'birth')">
								<view class="uni-input">{{formData.birth||$t('form.select')}}</view>
							</picker>
						</view>
						<!-- <input class="uni-input" name="birth" :disabled="!edit" :placeholder="$t('form.enter')"  /> -->
					</view>

					<view class="uni-form-item uni-column">
						<view class="title">{{$t("form.sex")}}</view>

						<radio-group :value="formData.sex" name="sex" class="uni-input">
							<label class="marRig">
								<radio :value="'1'" :checked="formData.sex=='1'" :disabled="!edit" />
								<text>{{$t( "form.man")}}</text>
							</label>
							<label>
								<radio :value="'0'" :checked="formData.sex=='0'" :disabled="!edit" />
								<text>{{$t( "form.nv")}}</text>
							</label>
						</radio-group>
					</view>
					<view class="uni-form-item uni-column">

						<view class="title">{{$t("form.passexpiry")}}</view>
						<picker class="uni-input" :disabled="!edit" mode="date" :value="formData.passexpiry"
							:start="startDate" :end="endDate" @change="(e)=>bindDateChange(e,'passexpiry')">
							<view>{{formData.passexpiry||$t('form.select')}}</view>
						</picker>

						<input class="uni-input" v-model="formData.passexpiry" v-show="false" name="passexpiry"
							:disabled="!edit" :placeholder="$t('form.enter')" />
					</view>
					<view class="xsTitle bold t-center">
						{{$t("form.title2")}}
					</view>

					<view class="uni-form-item uni-column">
						<view class="title"> {{$t('form.goTime')}}</view>

						<view class="uni-list-cell-db  uni-input">

							<input type="text" v-model="formData.gotime" v-show="false" name="gotime" />
							<picker mode="date" :disabled="!edit" class="uni-input" :value="formData.gotime"
								:start="startDate" :end="endDate" @change="(e)=>bindDateChange(e,'gotime')">
								<view>{{formData.gotime||$t('form.select')}}</view>
							</picker>
						</view>
					</view>



					<view class="uni-form-item uni-column">
						<view class="title"> {{$t('form.endTime')}}</view>

						<view class="uni-list uni-input">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<input type="text" v-show="false" v-model="formData.endtime" name="endtime" />
									<picker :disabled="!edit" class="uni-input" mode="date" :value="formData.endtime"
										:start="startDate" :end="endDate" @change="(e)=>bindDateChange(e,'endtime')">
										<view class="">{{formData.endtime||$t('form.select')}}</view>
									</picker>
								</view>
							</view>
						</view>
					</view>

					<view class="uni-form-item uni-column">
						<view class="title">{{$t("form.fiynum")}}</view>
						<input class="uni-input" @input="(e)=>inpChange(e,'fiynum')" name="fiynum"
							v-model="formData.fiynum" :disabled="!edit" :placeholder="$t('form.enter')" />
					</view>

					<view class="uni-form-item uni-column">
						<view class="title">{{$t("form.from")}}</view>

						<input class="uni-input" @input="inpChange" v-model="formData.from" name="from"
							:disabled="!edit" :placeholder="$t('form.enter')" />
					</view>

					<!-- <view class="uni-form-item uni-column">
								<view class="title">爱好</view>
								<checkbox-group name="loves">
									<label>
										<checkbox value="读书" /><text>读书</text>
									</label>
									<label>
										<checkbox value="写字" /><text>写字</text>
									</label>
								</checkbox-group>
							</view> -->
					<!-- <view class="uni-form-item uni-column">
								<view class="title">年龄</view>
								<slider value="20" name="age" show-value></slider>
							</view>
							<view class="uni-form-item uni-column">
								<view class="title">保留选项</view>
								<view>
									<switch name="switch" />
								</view>
							</view> -->
					<view class="tip red marTop marBtm">
						{{$t("form.tip")}}
					</view>

					<!-- <view class="picBar pad t-center">
								<image src="../../static/pic.png" style="100%" mode="widthFix"></image>
							</view> -->
					<view class="uni-btn-v flex-box center">
						<!-- {{isedit}} {{edit}} -->
						<button v-show="!isedit&&edit" size="mini" class="coll_40" type="info"
							form-type="reset">{{$t("form.reset")}}</button>
						<button v-show="!isedit&&edit" size="mini" class="coll_40" form-type="submit"
							type="primary">{{$t("form.submit")}}</button>

						<button v-show="isedit||!edit" size="mini" class="coll_40" type="warn"
							@click="goHome">{{$t("form.back")}}</button>
						<button v-show="isedit&&edit" size="mini" class="coll_40" form-type="submit"
							type="primary">{{$t("form.submit")}}</button>

						<button v-show="!edit" size="mini" class="coll_40" @click="goEdit"
							type="primary">{{$t("form.edit")}}</button>


					</view>
				</form>
			</block>
		</view>


	</view>
</template>
<script>
	import graceChecker from "@/common/graceChecker.js"

	function getDate(type) {
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 200;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;

		return `${year}-${month}-${day}`;
	}
	export default {
		data() {
			return {
				// isedit:false,
				applicationLocale: 'zh-Hans',
				edit: true,
				passnum: "",
				formData: {},
				birth: "",
				endtime: '',
				gotime: '',
				arriveOpt: ['KLIA T1', 'KLIA T2'],
				startDate: getDate('start'),
				endDate: getDate('end'),
				qrCode: 0,
			}
		},
		computed: {
			isedit() {
				return !!this.$route.query.id
			},
			appLangtext() {
				console.log("sd", this.locales.find(e => e.code == this.applicationLocale), this.locales, this
					.applicationLocale)
				return this.locales.find(e => e.code == this.applicationLocale) ? this.locales.find(e => e.code == this
					.applicationLocale).text : 'English'
			},
			locales() {
				return [
					// {
					//       text: this.$t('locale.auto'),
					//       code: 'auto'
					//     }, 
					{
						text: 'English',
						code: 'en'
					},
					{
						text: '中文',
						code: 'zh-Hans'
					}
					// {
					//   text: this.$t('locale.zh-hant'),
					//   code: 'zh-Hant'
					// },
					// {
					//   text: this.$t('locale.ja'),
					//   code: 'ja'
					// }
				]
			}
		},
		onLoad() {
			this.edit = true
			let systemInfo = uni.getSystemInfoSync();
			this.systemLocale = systemInfo.language;
			this.applicationLocale = uni.getLocale();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			uni.onLocaleChange((e) => {
				this.applicationLocale = e.locale;
			})
			this.qrCode = 2
			// this.applicationLocale = uni.getStorageSync('lang')
			console.log("sdsd", this.$route.query.uid, this.$route.query.uid !== 'null')
			if (this.$route.query.id) {

				this.edit = false
				this.getFormRes()
			}

			if (!!this.$route.query.uid && this.$route.query.uid !== 'null') {

				this.$set(this.formData, 'codeToken', this.$route.query.uid)
				this.codetable(this.$route.query.uid)
				// this.edit = false
				// this.getFormRes()

			}


		},

		methods: {
			codetable(uid) {
				uni.showLoading()

				uni.request({
					method: "get",
					url: this.$api + "/system/codetable/token/" + uid,
					success: (res) => {
						uni.hideLoading()
						if (res.data.code == 200) {
							this.qrCode = 2
						} else {
							this.qrCode = 1
						}
						// uni.showModal({
						// 	content:"Submit success！"
						// })
					},
					fail: (res) => {
						this.qrCode = 1
						/*	uni.showModal({
								content: "Submit fail！"
							})*/
					},
					complete() {
						uni.hideLoading()
					}
				})
			},


			inpChange(event, k = 'from') {
				if(k!="chName"){
					// const screeningStr = /[\W]/g;      //想禁止什么类型，在这里替换正则就可以了
					const screeningStr = /[\u4e00-\u9fa5]/g;; //想禁止什么类型，在这里替换正则就可以了
					console.log('dh222dhjdf', event.target.value.replace(screeningStr, ''))
					//return
					this.$nextTick(_ => {
						this.formData[k] = event.target.value.replace(screeningStr, '')
					
					})
				}else{
					this.$nextTick(_ => {
						this.formData[k] = event.target.value
					
					})
				}
			


			},
			goHome() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			goEdit() {
				// uni.navigateTo({
				// 	url:'/pages/form/form?id='+this.formData.id
				// })
				this.edit = true
			},
			bindDateChange(e, k) {
				let v = e.detail.value
				if (k == 'arrive') {
					v = this.arriveOpt[e.detail.value]
				}
				this.$set(this.formData, k, v)
				// [k] = 
				console.log("bindDateChange", this.formData[k], e)
			},
			getFormRes() {
				uni.showLoading()

				uni.request({
					method: "get",
					url: this.$api + "/system/datatable/" + this.$route.query.id,
					success: ({
						data
					}) => {
						uni.hideLoading()
						data = data?.data
						if (data) {
							// this.formData = res?.data
							this.$set(this, 'formData', {
								gotime: data.gotime,
								endtime: data.endtime,
								birth: data.birth,
								passnum: data.passnum,
								fiynum: data.fiynum,
								price: data.price,
								name: data.name,
								phone: data.phone,
								id: data.id,
								from: data.from,
								arrive: data.arrive,
								passexpiry: data.passexpiry,
								sex: '' + data.sex,
								country: data.country,
								codeToken: data.codeToken
							})
							// console.log("codeToken1",this.formData)
							this.edit = false
						}

						// uni.showModal({
						// 	content:"Submit success！"
						// })
					},
					fail: (res) => {
						/*	uni.showModal({
								content: "Submit fail！"
							})*/
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			onLocaleChange(v) {
				let e = this.locales[v.detail.value || 0]
				console.log("onLocaleChange", v, e)
				if (this.isAndroid) {
					// uni.showModal({
					//   content: this.$t('index.language-change-confirm'),
					//   success: (res) => {
					//     if (res.confirm) {
					uni.setLocale(e.code);
					//     }
					//   }
					// })
				} else {
					uni.setLocale(e.code);
					uni.setStorageSync('lang', e.code)

					this.$i18n.locale = e.code;
				}
				this.$i18n.locale = e.code;
				// this.applicationLocale = v.detail.value;
			},
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				//定义表单规则
				var rule = [
					// "姓名应为1-3个字符"
					{
						name: "arrive",
						checkType: "string",
						checkRule: "1,50",
						errorMsg: this.$t("form.select") + ' ' + this.$t("form.arrive")
					},
					{
						name: "name",
						checkType: "string",
						checkRule: "1,50",
						errorMsg: this.$t("form.enter") + ' ' + this.$t("form.nRules")
					},
					{
						name: "phone",
						checkType: "string",
						checkRule: "1,22",
						errorMsg: this.$t("form.enter") + ' ' + this.$t("form.phone")
					},
					{
						name: "passnum",
						checkType: "string",
						checkRule: "1,50",
						errorMsg: this.$t("form.enter") + ' ' + this.$t("form.passnum")
					},
					{
						name: "country",
						checkType: "string",
						checkRule: "1,50",
						errorMsg: this.$t("form.enter") + ' ' + this.$t("form.country")
					},
					{
						//name: "sex",
						checkType: "init",

						errorMsg: this.$t("form.select") + ' ' + this.$t("form.sex")
					},

					{
						name: "birth",
						checkType: "string",
						checkRule: "1,10",
						errorMsg: this.$t("form.select") + ' ' + this.$t("form.birth")
					},
					{
						name: "passexpiry",
						checkType: "string",
						checkRule: "1,50",
						errorMsg: this.$t("form.enter") + ' ' + this.$t("form.passexpiry")
					},
					{
						name: "gotime",
						checkType: "string",
						checkRule: "1,50",
						errorMsg: this.$t("form.select") + ' ' + this.$t("form.goTime")
					},
					{
						name: "endtime",
						checkType: "string",
						checkRule: "1,50",
						errorMsg: this.$t("form.select") + ' ' + this.$t("form.endTime")
					},
					{
						name: "fiynum",
						checkType: "string",
						checkRule: "1,13",
						errorMsg: this.$t("form.enter") + ' ' + this.$t("form.fiynum")
					},



					{
						name: "from",
						checkType: "string",
						checkRule: "1,50",
						errorMsg: this.$t("form.enter") + ' ' + this.$t("form.from")
					},


					{
						name: "counter",
						// checkType: "string",
						checkRule: "1,50",
						errorMsg: this.$t("form.enter") + ' ' + this.$t("form.counter")
					},
				];
				//进行表单检查
				if (!(+e.detail.value['endTime'])) {
					e.detail.value['endTime'] = ''
				}

				this.formData = {
					...e.detail.value,
					codeToken: this.$route.query.uid,
					id: this.formData.id,
					sex: +e.detail.value.sex,
					arrive: this.formData.arrive
				};
				// debugger
				console.log("formData", this.formData, e.detail.value)
				var checkRes = graceChecker.check(this.formData, rule);
				if (checkRes) {
					uni.showLoading()
					uni.request({
						method: this.$route.query.id || this.formData.id ? 'put' : "post",
						url: this.$api + "/system/datatable",
						data: this.formData,
						success: (res) => {
							// debugger
							if (res?.data.code == 200) {

								uni.showToast({
									icon: 'none',
									title: "Submit success！"
								})

								this.$set(this.formData, 'id', res.data.data)
								console.log("t.res.data", res.data, this.formData.id)
								// if(res?.data&&!this.$route.query.id){
								// 	uni.navigateTo({
								// 		url:'/pages/form/form'+"?id="+res?.data
								// 	})
								// }

								this.edit = false
							} else {
								uni.showModal({
									content: "Submit fail！" + res.data.msg,
									showCancel: false,
									confirmText: "OK",
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});

								// uni.showToast({
								// 	icon: 'error',
								// 	title: "Submit fail！" + res.data.msg
								// })
							}

						},
						fail: (err) => {

							uni.showToast({
								icon: 'error',
								title: "Submit fail！"
							})
						},

						complete() {
							uni.hideLoading()
						}
					})
					// uni.showToast({
					// 	title: "验证通过!",
					// 	icon: "none"
					// });
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},
			formReset: function(e) {
				this.formData = {
					...this.formData,
					id: this.formData.id,
					codeToken: this.formData.codeToken,
					gotime: '', //gotime
					endtime: '', //endtime
					birth: '', //birth
					passexpiry: '', //passnum
					arrive: ''
				}
				console.log('清空数据')
			}
		},

	}
</script>

<style lang="less" scoped>
	.uni-form-item .title {
		padding: 5rpx 8px;
		border-right: 1px solid rgb(228, 230, 237);
		color: var(--colorf);
		font-size: 25rpx;
		text-align-last: justify;
		min-width: 120rpx;

	}

	.uni-form-item {
		display: flex;
		align-items: center;
		border: 1px solid rgb(228, 230, 237);
		border-radius: 6px;
		margin-bottom: 5px;
		padding: 8rpx 4rpx;

		&[required]:before {
			content: '*';
			color: red;
		}
	}

	.xsTitle {
		margin: 23rpx 0rpx 13rpx;
		font-size: 28rpx;
	}

	.uni-input {
		flex: 1;
		font-size: 24rpx;
		padding: 0px 10rpx 0 10rpx;
	}

	.tipBox {
		width: 100vw;
		height: 60vh;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		text-align: center;
	}
</style>